<template>
	<view class="home">
		<!-- <view> -->
			<view class="total-top">
				<view v-for="t1 in items1" :key="t1.id" class="flex pl50 f-1">
					<view class="left-img">
						<image mode="heightFix" :src="t1.imgUrl"></image>
					</view>
					<view class="pt6">
						<view class="num">{{ t1.num }}</view>
						<view class="name pt6">{{ t1.name }}</view>
					</view>
				</view>
			</view>
			<view class="total-bom">
				<view v-for="t2 in items2" :key="t2.id" class="flex pl50 f-1">
					<view class="left-img">
						<image mode="heightFix" :src="t2.imgUrl"></image>
					</view>
					<view class="pt6">
						<view>
							<text class="money">{{ t2.num }}</text>元
						</view>
						<view class="name pt6">{{ t2.name }}</view>
					</view>
				</view>
			</view>
		<!-- </view> -->
		<view class="echarts-box">
			<view class="echart-l" id="echart1">
				
			</view>
			<view class="echart-r" id="echart2">
				
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import { Request } from '../model/request.js'
	import { Util } from '../utils/util.js'
	
	export default {
		data() {
			return {
				items1: [],
				items2: [],
				item: {}
			}
		},
		
		mounted() {
			this.getNumbers()
		},
		
		methods: {
			async getNumbers() {
				let res = await Request.INDEXALLDATA()
				if (res.code == 200) {
					this.item = res.data
					let t = res.data
					this.items1 = [
						{ id: 1, name: '总客户', num: t.userCount, imgUrl: '/static/home/pt_1.png' },
						{ id: 2, name: '媒体总数', num: t.mepCount, imgUrl: '/static/home/pt_2.png' },
						{ id: 3, name: '广告位总数', num: t.adCount, imgUrl: '/static/home/pt_3.png' }
					]
					this.items2 = [
						{ id: 1, name: '总收益', num: Util.getMoney(t.allMoney), imgUrl: '/static/home/pt_4.png' },
						{ id: 2, name: '媒体总收益', num: Util.getMoney(t.mepNum), imgUrl: '/static/home/pt_5.png' },
						{ id: 3, name: '广告位总收益', num: Util.getMoney(t.adNum), imgUrl: '/static/home/pt_6.png' }
					]
					this.initEcharts(1, { name1: '广告位收益', name2: '媒体收益', value1: t.adNum, value2: t.mepNum })
					this.initEcharts(2, { name1: '广告位数据创建', name2: '媒体数据创建', value1: t.adCount, value2: t.mepCount })
				}
			},
			
			initEcharts(n, t) {
				// 获取dom，初始化实例
				let echart1 = echarts.init(document.getElementById('echart' + n))
				echart1.setOption({
					title: {
						text: n == 1? '媒体、广告位总收益占比（%）':'媒体、广告位数据创建占比（%）',
						// subtext: '纯属虚构',
						left: 'left',
						left: 10,
						top: 10
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}: {c}  ({d}%)'
					},
					// color: [
					// 	{
					// 	    type: 'pie',
					// 		x: 0,
					// 		y: 0,
					// 		x2: 0,
					// 		y2: 1,
					// 		colorStops: [{
					// 			offset: 0, color: '#16DBAF' // 0% 处的颜色
					// 		}, {
					// 			offset: 1, color: '#4B97F5' // 100% 处的颜色
					// 		}],
					// 		globalCoord: false // 缺省为 false
					// 	},
					// 	{
					// 	    type: 'pie',
					// 		x: 0,
					// 		y: 0,
					// 		x2: 0,
					// 		y2: 1,
					// 		colorStops: [{
					// 			offset: 0, color: '#FE9A58' // 0% 处的颜色
					// 		}, {
					// 			offset: 1, color: '#FB5058' // 100% 处的颜色
					// 		}],
					// 		globalCoord: false // 缺省为 false
					// 	}
					// ],
					color: ['#4B97F5', '#82cc4a'],
					legend: {
						orient: 'vertical',
						left: 20,
						top: 70,
						data: [t.name1, t.name2]
					},
					series: [
						{
							name: '访问来源',
							type: 'pie',
							radius: ['40%', '54%'],
							avoidLabelOverlap: false,
							// itemStyle: {
							// 	borderRadius: 10,
							// 	borderColor: '#fff',
							// 	borderWidth: 10
							// },
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '30',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: [
								{value: t.value1, name: t.name1},
								{value: t.value2, name: t.name2}
							]
						}
					]
				})
			}
		}
	}
</script>

<style scoped>
	.home {
		padding: 30px 40px;
		display: flex;
		flex-direction: column;
		/* justify-content: space-between; */
	}
	
	.total-top, .total-bom {
		display: flex;
		align-items: flex-end;
		background-color: #fff;
		height: 160px;
		min-height: 160px;
		padding-bottom: 10px;
	}
	
	.total-bom {
		margin-top: 30px;
	}
	
	.left-img {
		margin-right: 20px;
	}
	
	.left-img image {
		height: 108px;
		width: 120px;
		/* border: 1px solid red; */
		display: block;
	}
	
	.num {
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 800;
		color: #16171F;
	}
	
	.name {
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #767786;
	}
	
	.money {
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 800;
		color: #16171F;
	}
	
	.pl50 {
		padding-left: 50px;
	}
	
	.echarts-box {
		display: flex;
		margin-top: 30px;
		flex: 1;
	}
	
	.echart-l, .echart-r {
		background-color: #fff;
		padding: 20px;
		flex: 1;
		/* height: calc(100vh - 451px); */
		min-height: 400px;
	}
	
	.echart-r {
		margin-left: 30px;
		/* border: 1px solid red; */
	}
	
	.pt6 {
		padding-top: 6px;
	}
</style>
